<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>verdaccio</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入Element UI JavaScript 库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header>
          <div class="logoHeader-info">
            <div class="default-logo"></div>
            <div class="default-title">Verdaccio 插件包下载记录台账</div>
          </div>
        </el-header>
        <div style="padding: 0 20px">
          <el-tabs v-model="activeName" @tab-click="onTabClick">
            <el-tab-pane label="下载总量统计表" name="first"></el-tab-pane>
            <el-tab-pane disabled label="下载量详情表" name="second"></el-tab-pane>
            <el-tab-pane label="周榜单" name="3"></el-tab-pane>
            <el-tab-pane label="月榜单" name="4"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格展示 -->
        <el-main v-show="activeName === 'first'">
          <div class="header">
            <div class="header-info"></div>
            <div class="header-btn">
              <el-button type="primary" size="mini" @click="handleClick" :loading="isLogLoading"> 解析实时日志 </el-button>
            </div>
          </div>
          <div class="table-box">
            <el-table :data="tableData" size="mini" border stripe height="700" :default-sort="{prop: 'value', order: 'descending'}">
              <el-table-column prop="packageName" label="插件名" sortable> </el-table-column>
              <el-table-column prop="" label="插件作者"> </el-table-column>
              <el-table-column prop="" label="插件描述"> </el-table-column>
              <el-table-column prop="totalWeekDownloads" label="最近一周下载次数" sortable width="180"> </el-table-column>
              <el-table-column prop="totalMonthDownloads" label="最近一月下载次数" sortable width="180"> </el-table-column>
              <el-table-column prop="value" label="下载总数" sortable width="180" header-align="left" align="right"> </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="{row}">
                  <el-button type="primary" size="mini" @click="onDetailClick(row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
        <el-main v-show="activeName === 'second'">
          <div class="header">
            <div class="header-info">
              <el-select size="small" v-model="packageName" clearable filterable @change="onPackageNameChange" placeholder="请选择插件名称" style="width: 400px">
                <el-option v-for="item in tableData" :key="item.packageName" :label="item.packageName" :value="item.packageName"> </el-option>
              </el-select>
            </div>
            <div class="header-btn"></div>
          </div>
          <div class="table-box">
            <el-table :key="activeName" :data="detailTableData" size="mini" border stripe height="700" :default-sort="{prop: 'packageName', order: 'ascending'}">
              <el-table-column prop="packageName" label="插件名" sortable> </el-table-column>
              <!-- <el-table-column prop="version" label="版本号"> </el-table-column> -->
              <el-table-column prop="" label="版本描述"> </el-table-column>
              <el-table-column prop="weekDownloads" label="最近一周下载次数" sortable width="180"> </el-table-column>
              <el-table-column prop="monthDownloads" label="最近一月下载次数" sortable width="180"> </el-table-column>
              <el-table-column prop="value" label="下载总数" sortable width="180" header-align="left" align="right"> </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data: {
        tableData: [],
        detailTableData: [],
        activeName: 'first',
        isLogLoading: false,
        packageName: null
      },
      mounted() {
        this.initLocalStorage()
      },
      methods: {
        onPackageNameChange() {
          this.detailTableData = this.tableData.filter((item) => item.packageName === this.packageName)[0]?.details
        },
        onDetailClick(row) {
          const { packageName } = row
          this.packageName = packageName
          this.activeName = 'second'
          this.onPackageNameChange()
        },
        initLocalStorage() {
          const data = JSON.parse(window.localStorage.getItem('pm2_downloadLogs'))

          if (!data?.length) {
            this.getPm2VerdaccioLogs()
          } else {
            this.filterData(data)
          }
        },
        filterData(data) {
          this.isLogLoading = false
          this.tableData = data || []
          window.localStorage.setItem('pm2_downloadLogs', JSON.stringify(this.tableData))
        },
        getPm2VerdaccioLogs() {
          this.isLogLoading = true

          $.ajax({
            url: `/api/getPm2VerdaccioLogs`,
            type: 'get',
            hideNotice: true,
            success: (res) => {
              this.isLogLoading = false
              this.tableData = res?.data?.downloadLogs || []
              window.localStorage.setItem('pm2_downloadLogs', JSON.stringify(this.tableData))
            },
            error: () => {
              // this.mockData()
            }
          })
        },
        onTabClick() {},
        handleClick() {
          this.getPm2VerdaccioLogs()
        }
      },
      components: {}
    })
  </script>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #f4f4f4;
    }
    #app {
      width: 100%;
      height: 100%;
    }
    .el-container {
      width: 100%;
      height: 100%;
    }
    .logoHeader-info {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .default-title {
      margin-left: 20px;
      color: #fff;
      font-weight: 600;
    }
    .el-header {
      height: 64px !important;
      background-color: #4b5e40;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .default-logo {
      display: inline-block;
      vertical-align: middle;
      box-sizing: border-box;
      -webkit-background-position: center;
      background-position: center;
      -webkit-background-size: contain;
      background-size: contain;
      background-image: url();
      background-repeat: no-repeat;
      width: 40px;
      height: 40px;
    }
    .el-main {
      padding: 0 20px 20px 20px;
      display: inline-flex;
      flex-direction: column;
    }
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .header-btn {
    }
    .table-box {
      flex: 1;
    }
    .el-table {
      width: 100%;
      height: 100%;
    }
  </style>
</html>
